<template>
  <el-descriptions
      class="margin-top"
      title="工单信息"
      :column="5"
      size="large"
      border
  >
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <Tickets/>
          </el-icon>
          工单编号
        </div>
      </template>
      {{ order.order_id }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <OfficeBuilding/>
          </el-icon>
          申请部门
        </div>
      </template>
      {{ order.apply_depart }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <user/>
          </el-icon>
          申请人
        </div>
      </template>
      {{ order.apply_person }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <user/>
          </el-icon>
          联系人
        </div>
      </template>
      {{ order.contact_person }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <iphone/>
          </el-icon>
          联系电话
        </div>
      </template>
      {{ order.contact_phone }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <ScaleToOriginal/>
          </el-icon>
          信息系统名称
        </div>
      </template>
      {{ order.app_name }}
    </el-descriptions-item>
    <el-descriptions-item :span="4">
      <template #label>
        <div class="cell-item">
          <el-icon>
            <Document/>
          </el-icon>
          用途及业务说明
        </div>
      </template>
      {{ order.remarks }}
    </el-descriptions-item>
    <el-descriptions-item :span="5">
      <template #label>
        <div class="cell-item">
          <el-icon>
            <Files/>
          </el-icon>
          附件
        </div>
      </template>
      <div style="display: flex;gap:10px;">
        <el-space wrap>
          <span v-for="item in order.order_file">
            <el-link v-if="['jpg', 'jpeg', 'png', 'gif'].includes(item.file_ext_name)" icon="PictureFilled" type="primary"
                     @click="doPreview(item.url,item.file_ext_name,item.name)">{{ item.name }}</el-link>
            <el-link v-else-if="['pdf'].includes(item.file_ext_name)" icon="Document" type="primary"
                     @click="doPreview(item.url,item.file_ext_name,item.name)">{{ item.name }}</el-link>
            <el-link v-else icon="Document" target="_blank" :href="item.url" type="primary">{{ item.name }}</el-link>
          </span>
        </el-space>
      </div>
    </el-descriptions-item>
  </el-descriptions>


  <el-dialog v-model="state.previewDialog" :title="`文件预览 - ${state.file_name}`" width="80%">
    <img
        v-if="['jpg', 'jpeg', 'png', 'gif'].includes(state.file_ext_name)"
        :src="state.url"
        style="max-width: 100%; max-height: 60vh; display: block; margin: 0 auto;"
    />
    <iframe
        :src="state.url"
        width="100%"
        height="600px"
        style="border: none;"
    ></iframe>
  </el-dialog>
</template>

<script setup>

import {reactive, ref} from "vue";

defineProps(['order'])

const state = reactive({
  previewDialog: false,
  url: "",
  file_ext_name: "",
  file_name: ""
})

function doPreview(url, file_ext_name, file_name) {
  state.previewDialog = true
  state.url = url
  state.file_ext_name = file_ext_name
  state.file_name = file_name
}
</script>

<style scoped>
.iconStyle {

}
</style>